<template>
    <div class="meterialReceive">
        <!-- 左边类别菜单 -->
        <tree-model :treeModelMes="treeModelMes" :defaultIds='defaultIds' @treeModelFn='treeModelFn' class="ClassTree"></tree-model>
        <!-- 右边内容 -->
        <div class="contentRight">
            <!-- 右边头部 -->
          <div class="header">
               <div class="warehouses" v-show="allWarehouses&&allWarehouses.length>1">
                   <span>请选择仓库：</span> 
                   <el-select @change="getTheClassificationTree" v-model="warehouses" placeholder="请选择仓库" class="selectClass">
                      <el-option   v-for="item in allWarehouses"  :key="item.wh_id"  :label="item.wh_name" :value="item.wh_id"></el-option>
                   </el-select>
              </div>
              <div class="getIt">
                  <div class="headerTitle">    
                      <i class="el-icon-s-order" style="font-size:12px;color: #bbbbbb;"></i>
                      领用单：共  <span style="color:rgba(255, 47, 47, 1);font-size: 12px;">{{recieveList.length}} </span> 件 价值：￥<span style="color:rgba(255, 47, 47, 1);font-size: 12px;">0</span>元
                  </div>
                  <el-button plain  :type="recieveList.length>0? 'primary': '' "  @click="goFn(0)" :disabled="recieveList.length==0">领用</el-button>
                  <el-button  plain @click="empty">清空</el-button>
              </div>
          </div>
            <!-- 右边主体 -->
            <div class="rightContent" ref="rightContent"  @scroll="getScoll($event)"> 
                <div class="assetsAcqNo"  v-if='meterialList.length==0'>
                    <img :src="listNo">
                    <div>暂无数据，请等待管理员添加耗材</div>
                </div>
                <item-card v-else v-for="(item,index) in meterialList" :key="index" :item='item' :defaultProp="defaultProp" >
                    <div class="btnList" style="margin-top:8px;">
                        <el-button  @click="addToList(item)" :class="{'base':true,'able':!item.disabled,'disabled':item.disabled,}">{{item.disabled?'已加入领用单':'加入领用单'}}</el-button>
                       <!-- <el-input-number :disabled="item.disabled" size="mini " v-model="item.num"  :min="0" :max="100" label="已超库存"></el-input-number> -->
                    </div>
                </item-card>
            </div>
        </div>
    </div>
</template>
<script>

 /* eslint-disable */ 
import {getReceiveList} from "./api"
import {getMyWarehouse,getCategoryByWarehouse}  from '@/api'
import itemCard from "@/components/itemCard"
import TreeModel from "@/components/TreeModel"
export default {
    name: "meterialReceive",
    components:{
        TreeModel,itemCard
    },
    data() {
        return{
            dept_ids:'',
            defaultProp:['image_url','c_name','c_code','c_specs','c_stock'],
            warehouses:'',/**部门 */
            allWarehouses:[],/*我的全部仓库*/
            recieveList:[],/*领用单*/
            listNo: require("@/assets/images/nohas.png"),/**类别下无数据时展示图 */
            assetsNo:require("@/assets/images/assets-no.png"),
            treeModelMes:{
                label:"耗材类别",
                titleImg: require("@/assets/images/types.png"),
                treeModelData:[],
                defaultProps: { children: 'cate',label: 'category_name'}
            },/*treeModel数据*/
            meterialList: [],/*耗材列表*/
            ruleForm: {
                formList: [],
            },/*领用表单*/
            rules: {},/*领用表单校验规则*/
            defaultIds:[],/**默认展开的id */
            value: ''
        }
    },
    created(){
        let dept_ids = this.$store.state.users.department.map(item=>{return item.dept_id}).join(',')
        this.dept_ids = dept_ids
        getMyWarehouse({dept_ids}).then(res=>{
            log(res)
            this.allWarehouses = res.data
            this.warehouses = res.num>0?res.data[0].wh_id:''
            res.num>0?this.getTheClassificationTree():''
        })
    },
    mounted(){
    },
    methods: {
        /**清空 */
        empty(){
            this.$store.commit('changeCollarUseOfMeterials',[])
            this.recieveList = []
            this.meterialList.forEach(ele=>{
                ele.disabled = false
            })
        },
        /**获取耗材分类树 */
        getTheClassificationTree(){
            getCategoryByWarehouse({category_type:1,wh_id:this.warehouses}).then(res=>{
                this.treeModelMes.treeModelData = res
                if(!(res.length&&res[0].cate&&res[0].cate.length)){
                    this.meterialList = []
                }
                res.length&&res[0].cate&&res[0].cate.length?this.defaultIds = [res[0].cate[0].id]:''
            })
        },
        /**根据仓库id和分类id获取耗材列表*/
        treeModelFn(val){
            if(val.pid==0) return
            this.meterialList = []
            const param = { c_cid: val.id,wh_id:this.warehouses}
            getReceiveList(param).then((data)=>{
                data.forEach(element => {
                    element.disabled = false
                    element.num = 0
                    if(this.recieveList&&this.recieveList.length){
                        this.recieveList.forEach(item=>{
                            if(item.re_a_id==element.re_a_id){
                                element.disabled=true
                                element.num = item.num
                            }
                        })
                    }
                });
                 this.meterialList = data
            },(error)=>{
                if(error=='无物品'){
                    this.meterialList = []
                }
            })
        },
        /**跳转领用页面 */
        goFn(){
            this.$store.commit('changeCollarUseOfMeterials',this.recieveList)
            this.$router.push({path:'/collarUseOfMeterial',query:{ param: this.$route.meta.title,dept_ids:this.dept_ids,warehouses:this.warehouses}})
        },
        /** 添加到领用单*/
        addToList(item){
            //if(item.num==0) return this.$message('领用的耗材数量不能为零');
            item.disabled=!item.disabled;
            if(item.disabled) return this.recieveList.push(item)
            let idx 
            this.recieveList.forEach((ele,index)=>{
                if(ele.id==item.id)idx=index
            })
            this.recieveList.splice(idx,1)
        }
    }
}
</script>

<style lang="stylus" scoped>
.meterialReceive
    height 100%
    width 100%
    display flex
    .ClassTree
        width 175px
        margin-right 10px
    .contentRight
        flex 1
        background-color #fff
        width 100%
        padding 20px
        display flex
        flex-direction column
     .header
            display flex
            flex-wrap wrap
            align-items center
            min-height 60px
            width: 99%;
            background-color rgba(243, 246, 249, 1)
            justify-content space-between
            margin 2px 0 15px 0
           @media screen and (max-width: 1500px)
                .selectClass
                    width 160px
                    height 30px
            @media screen and (min-width: 1500px)
                .selectClass
                    width 200px
                    height 30px
            .headerTitle
                color: #606266;
                font-size: 12px;
                margin-right 20px
                min-width 186px
            .warehouses
                color: rgba(96, 97, 102, 1)
                font-size: 14px;
                display flex
                align-items center
                span
                   margin 0 3px 0 23px
                   color rgba(96, 98, 102, 1)
                >>> .el-input__inner
                    padding 4px 15px 0 !important
                    height: 30px;
            .getIt
                flex 1
                display flex
                align-items center
                margin-left 7px
                padding 8px 10px 6px 10px
                >>> .el-button
                    padding 3px
                    width: 65px;
                    height: 30px;
        .assetsAcqNo
            display flex
            flex-direction column
            justify-content center
            align-items center
            >img 
                margin 50px 0
        .rightContent
            flex 1
            overflow-y auto
            .btnList
              .base
                  width: 90px;
                  height: 25px;
                  line-height : 7px;
                  padding 5px
                  box-sizing border-box
                  border-radius: 4px;
                  font-size: 12px;
                  text-align: center;
                  font-family: Microsoft Yahei;
              .able
                  background-color: rgba(255, 255, 255, 0);
                  color: rgba(10, 142, 255, 1);
                  border: 1px solid rgba(10, 142, 255, 1);
              .disabled
                  background-color: rgba(255, 255, 255, 0);
                  color: rgba(255, 47, 47, 1);
                  border: 1px solid rgba(255, 47, 47, 1);
                  padding 0
                
           
</style>
<style lang="stylus">
.meterialReceive
    .el-input-number--mini 
        width 80px
    .el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase 
            width 20px !important
    .el-input-number--mini .el-input__inner
        padding 0
.warehouses
        .el-input__inner
            padding 4px 15px 0 !important
</style>
